<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../vue.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 
        计算属性比监视属性简便

        如果某个属性需要进行异步任务,只能使用watch, 监视属性不能使用computed

        监视属性,需要靠返回值来监测数据,如果给监视属性中填写计时器,计时器中的return 返回值不在监视属性身上

        定时器中的callback this指向是window 只能写成箭头函数

        computed和watch之间的区别:
            1.computed能完成的功能,watch都可以完成
            2.watch能完成的功能,computed不一定能完成 例如:watch可以进行异步操作.
        两个重要小原则:
            1.所被Vue管理的函数,最好写成普通函数,这样this的指向是vm 或者组件实例对象
            2.所有不被Vue管理的函数(定时器callback.ajkx中的callback等,) 最好写成箭头函数.
                this的指向才是 vm 或 组件实例对象
     -->

    <div class="root">
        <h1>姓: <input type="text" v-model="firstname"></h1><br><br>
        <h1>名: <input type="text" v-model="lastname"></h1><br><br>
        <hr>
        <h2>姓名:{{fullName}}</h2>
    </div>
</body>
    <script>
        const vm = new Vue({
            data:{
                firstname:'王',
                lastname:'八',
                fullName:'王八'
            },
            // computed:{
            //     fullname:{
            //         get(){
            //             return this.firstname.slice(0,3) + this.lastname
            //         }
            //     }
            // }
            watch:{
                firstname(Value){
                    setTimeout(()=>{ 
                        console.log(this)  //Vue === vm  写成普通函数this指向为window 
                        this.fullName = Value + this.lastname
                    },1000)
                },
                lastname(Value) {
                    this.fullName = this.firstname + Value  
                }
            }
        }).$mount('.root')
    </script>
</html>